<!-- template是 vue 提供的容器标签, 只祈祷包裹性质的作用, 他不会被渲染为真正的DOM元素-->
<!-- template中只能包含唯一的根节点, 也就说, 只能写一个div -->
<template>
  <div id="app2">
    <h2> this is user {{ username }} custom Test.vue</h2>
    <button @click="changeName">修改用户名</button>
  </div>
  <!--  error  The template root requires exactly one element -->
  <!-- -->
  <!--<div></div>-->
</template>

<script>
// 默认导出, 这是固定写法
export default {
  name: 'Test',
  // 注意: .vue 组件中的 data不能像之前一样, 不能指向对象
  // 注意: 组件中的data必须是一个函数
  // data: function () {}  ==> ES6简写 data () {
  data () {
    // 这个 return 出去的 {} 中, 可以定义数据
    return {
      username: 'llhuang10'
    }
  },
  methods: {
    changeName () {
      /**
       * 在组件中, this就表示当前组件的实例对象
       * VueComponent {_uid: 1, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: VueComponent,…}
       */
      console.log(this)
      this.username = 'hliushi'
    }
  },
  // 当前组件的侦听器
  watch: {},
  // 当前组件中的计算属性
  filters: {},
  // 当前组件中的过滤器
  computed: {}

}
</script>

<style lang="less" scoped>

#app2 {
  h2 {
    text-align: center;
  }
}


</style>
